<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">


        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>


        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div id="requirejs" class="tutorial">

            <h2>Integrating JointJS with RequireJS</h2>

            <p>
                Some people ask how to integrate <em>JointJS</em> with the <a href="http://requirejs.org" target="_blank">RequireJS</a>
                module loader.
                This tutorial describes how to do just that. Starting from <em>JointJS</em> v0.9, it is actually pretty
                simple. <em>JointJS</em>
                is in the AMD format which makes it easy to use it with RequireJS.
                <em>JointJS</em> exports only one global variable <b><code>joint</code></b>.
            </p>

            <h3>index.html</h3>

            <p>Let's start with our <code>index.html</code> file. This file includes only the <code>require.js</code>
                library, our stylesheets
                and defines what is the starting point of our application (in our case, <code>main.js</code> file):
            <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="joint.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script data-main="main" src="require.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>

            For simplicity, we assume all the files are in the same folder as our <code>index.html</code> file.

            <h3>RequireJS config, the main.js file</h3>

            <p>Now we can start with the more interesting part, our <code>main.js</code> file, containing the configuration
                of our modules needed by RequireJS. <em>JointJS</em> is dependent on <em>jQuery</em>, <em>Backbone</em>
                (which further depends on <em>Underscore</em>*).
            </p>

            <p>The only thing we have to do is to define our module names and tell RequireJS where to find them (the <code>paths</code>
                object).
                Next, we have to trick Backbone to use Lodash instead of Underscore (this is because JointJS requires
                Lodash, not just Underscore).
                All the files can be downloaded from <a href="http://jointjs.com/opensource#Download-JointJS" target="_blank">Download page</a>.</p>

            <pre><code class="language-javascript">require.config({
    paths: {
        jquery: './jquery',
        lodash: './lodash',
        backbone: './backbone'
    },
    map: {
        '*': {
            // Backbone requires underscore. This forces requireJS to load lodash instead:
            'underscore': 'lodash'
        }
    }
});

// Now we're ready to require JointJS and write our application code.
require(['joint'], function(joint) {
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({ width: 600, height: 400, model: graph });

    var elApp = document.getElementById('app');
    elApp.appendChild(paper.el);

    var rect = new joint.shapes.basic.Rect({
        position: { x: 50, y: 50 },
        size: { width: 100, height: 100 }
    });
    graph.addCell(rect);
});</code></pre>

            <p>
                * Note we previously mentioned that <em>Backbone</em> is dependent on <em>Underscore</em> but we actually
                use the <em>Lodash</em> library instead.
                This is becausae Lodash library is a drop-in replacement for <em>Underscore</em> extending it with more
                features that <em>JointJS</em> uses.
            </p>

        </div>

        <script src="../node_modules/prismjs/prism.js"></script>

    </body>
</html>
